<template>
    <div class="approvalDetails">
        <div class="approvalDetails_header">
            <div class="approvalDetails_header_navBar">
                {{ lookData.stockAuditStatus === 2 ? '已接收' : '待接收' }}
                <img class="approvalDetails_header_navBar_img" src="@/assets/porduct/zuo_jiantou.png" alt=""
                    @click="routerBack">
            </div>
        </div>
        <ListItems class="approvalDetails_ListItems" :row="lookData" :status="status" @click="handleGetDetails()" />
        <div class="approvalDetails_box">
            <StepBar stepBarTitle="审批结果" :data="StepBarData" :auditStatus="lookData.auditStatus" :status="status" />
        </div>
        <div v-if="lookData.stockAuditStatus !== 2 && look !== 'look'" class="approvalDetails_footer">
            <!-- <div class="footer_button" @click="reception()">接收</div> -->
            <van-button @click="reception()" :loading="loading" loading-text="执行中..." class="buttons" round block
                v-throttle:click>
                接收
            </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ListItems from '@/views/productSelection/components/listItemsNewui.vue' // 列表单个项
import StepBar from './components/stepBar/index.vue'  // 步骤条
import { getStockAppList, stockAccept } from '@/api/productHome/index'
import { showConfirmDialog, showSuccessToast, showFailToast } from "vant";
const loading = ref(false)
const route: any = useRoute()
const router = useRouter()
const showLoading = ref(false)
const status = ref()
const lookData = ref<any>({})
const look = ref('')
const StepBarData = ref([])

// 需要展示步骤条的数据
const getStepBarData = () => {
    if (lookData?.value?.auditStatus === '21') {
        // 18：入库通过、变价通过
        StepBarData.value = lookData.value.hmChangeAuditLogVos.reverse()
        return
    }
}
// 返回
const routerBack = () => {
    router.go(-1)
}
/** 获取详情 */
const handleGetDetails = () => {
    router.push({ path: `/productHomeDetail/${lookData?.value?.productId}` })
};
const getLookData = async (id: any) => {
    showLoading.value = true
    const { rows = [] } = await getStockAppList({ id })
    if (rows && rows.length) {
        lookData.value = rows[0] || null
    }
    getStepBarData()
    showLoading.value = false
}
const reception = () => {
    showConfirmDialog({
        title: '变价接收',
        message:
            '确认要将变价信息同步更新吗？',
    }).then(async () => {
        loading.value = true
        try {
            await stockAccept({ id: lookData.value.id, productId: lookData.value.productId, changeMechanismList: lookData.value.changeHmMechanismsLists })
            showSuccessToast({ type: "success", message: "接收成功" });
            loading.value = false
            routerBack()
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('接收失败');
            }
            loading.value = false
        }


    }).catch(() => { });
}
onMounted(() => {
    status.value = Number(route?.query?.status)
    look.value = route?.query?.look
    getLookData(route?.query?.id)
})
</script>

<style lang="less" scoped>
.approvalDetails_footer {
    width: 375px;
    height: 84px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .buttons {
        width: 345px;
        height: 44px;
        background: linear-gradient( 146deg, #0064FF 0%, #008FFF 100%);
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin: auto;

    }

}


    
.approvalDetails {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column;
    background: #f6f8fa;

    .approvalDetails_header {
        padding-top: 45px;
        background: linear-gradient(#CDECFF 0%, #FFFFFF 100%);
        margin-bottom: 10px;

        .approvalDetails_header_navBar {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            position: relative;

            .approvalDetails_header_navBar_img {
                position: absolute;
                top: 50%;
                left: 15px;
                transform: translate(0%, -50%);
                width: 15px;
                height: 16px;
            }
        }
    }

    .approvalDetails_ListItems {
        margin-bottom: 15px;
    }

    .approvalDetails_box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 15px 15px;
        box-sizing: border-box;
    }

    .approvalDetails_footer {
        width: 375px;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 20px 15px;
        box-sizing: border-box;

        .footer_button {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0094FF;
            border-radius: 23px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>